﻿@{
    ViewBag.Title = "Consumption";
}

@using MMS.UI.Extension;
@section headSection{
<script src="/Scripts/echarts.js"></script>
<script src="/Scripts/vintage.js"></script> 
       @*会员消费分析数据列表*@
    <script type="text/javascript">
        $(function () {
            $.globalHelper.datagridPara.init("/Admin/MembershipAnalysis/Consumption",
                [@Html.GetSonBtnJs()],
                [[
                { field: 'Id', title: '会员编号', width: 50,hidden:true},
                { field: 'Name', title: '会员姓名', width: 50, sortable: true },
                { field: 'Frequency', title: '购买频率', width: 50, sortable: true },
                { field: 'MaxMonetary', title: '单次最高交易金额', width: 50, sortable: true },
                { field: 'AVGMonetary', title: '平均每次交易金额', width: 50, sortable: true },
                { field: 'AllCategory', title: '商品购买种类', width: 50, sortable: true },
                {
                    field: 'dataTime', title: '最近购买时间', width: 80, sortable: true,
                    formatter: function (colData) {
                        return $.globalHelper.changeDateFormat(colData);
                    }
                }
                ]]);

            
            $("#tbList").datagrid($.globalHelper.datagridPara.paras);
            
            $("#tbList").datagrid({
            })

        });
    </script>

    @*“1.0会员消费分析表格”的雷达图*@
     <script type="text/javascript">
    $.post('/Admin/MembershipAnalysis/Consumption', function (jsonText) {
        var myChart = echarts.init(document.getElementById('main1'), 'macarons');
        myChart.setOption({
            title: {
                text: '“1.0会员消费分析表格”的雷达图'
            },
            tooltip: {},
            toolbox: {
                feature: {
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            legend: {
                data: []
            },
            radar: {
                // shape: 'circle',
                indicator: [
                    { name: '购买频率', max: 100 },
                    { name: '单次最高交易金额', max: 15000 },
                    { name: '平均每次交易金额', max: 15000 },
                    { name: '商品购买种类', max: 100 },
                   
                ]
            },
            series: [{
                name: '会员分析雷达图 ',
                type: 'radar',
                // areaStyle: {normal: {}},
                data: []
            }]

        });
        myChart.showLoading();
        var dataName = [];
        var dataData = [];
        if (typeof (jsonText) == "string") {
            try {
                jsonText = eval(jsonText);
            } catch (e) {
                try {
                    jsonText = eval("(" + jsonText + ")");
                } catch (e) {
                    alert("格式错误：必须为json格式字符串");

                }

            }

        }

        for (var i = 0; i < jsonText.length; i++) {
            dataName[i] = jsonText[i].Name;

            dataData[i] = { value: [jsonText[i].Frequency, jsonText[i].MaxMonetary, jsonText[i].AVGMonetary, jsonText[i].AllCategory, $.globalHelper.changeDateFormat(jsonText[i].dataTime)], name: dataName[i] };
        }
        myChart.hideLoading();
        myChart.setOption({
            legend: {
                data: dataName
            },
            series: [{
                data: dataData
            }]

        });

    });
     </script>
    @*2.0会员年度消费分析表格*@
<script type="text/javascript">
    //折线图堆叠
    $.post('/Admin/MembershipAnalysis/GetAnnualConsumption/', function (jsonText) {
        var myChart = echarts.init(document.getElementById('main2'), 'macarons');
        var colors = ['#5793f3', '#d14a61', '#6F00D2', '#00ec00', '#675bba'];
        myChart.setOption({
            color: colors,
            title: {
                text: '2.0会员年度消费分析表格'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                right: '20%'
            },
            toolbox: {
                feature: {
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            legend: {
                data: ['购买频率', '单次最高交易金额', '平均交易金额', '总交易金额', '商品购买种类']
            },
            xAxis: [
                {
                    type: 'category',
                    name: '年',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '频率',
                    min: 0,
                    max: 450,
                    position: 'right',
                    axisLine: {
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} '
                    }
                },
                {
                    type: 'value',
                    name: '单次最高交易金额',
                    min: 0,
                    max: 15000,
                    position: 'right',
                    offset: 60,
                    axisLine: {
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                },
                {
                    type: 'value',
                    name: '平均交易金额',
                    min: 0,
                    max: 15000,
                    position: 'right',
                    offset: 145,
                    axisLine: {
                        lineStyle: {
                            color: colors[2]
                        }
                    }
                },
                {
                    type: 'value',
                    name: '总交易金额',
                    min: 0,
                    max: 3000000,
                    position: 'right',
                    offset: 205,
                    axisLine: {
                        lineStyle: {
                            color: colors[3]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                },
                {
                    type: 'value',
                    name: '商品购买种类',
                    min: 0,
                    max: 200,
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: colors[4]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} '
                    }
                }
            ],
            series: [
                {
                    name: '购买频率',
                    type: 'bar',
                    data: []
                },
                {
                    name: '单次最高交易金额',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: []
                },
                  {
                      name: '平均交易金额',
                      type: 'bar',
                      yAxisIndex: 2,
                      data: []
                  },
                  {
                      name: '平均交易金额',
                      type: 'bar',
                      yAxisIndex: 3,
                      data: []
                  },
                {
                    name: '商品购买种类',
                    type: 'line',
                    yAxisIndex: 4,
                    data: []
                }]
        });
        myChart.showLoading();
        var frequency = [];
        var maxMonetary = [];
        var aVGMonetary = [];
        var allMonetary = [];
        var allCategory = [];
        var time = [];


        if (typeof (jsonText) == "string") {
            try {
                jsonText = eval(jsonText);
            } catch (e) {
                try {
                    jsonText = eval("(" + jsonText + ")")
                } catch (e) {
                    alert("格式错误：必须为json格式字符串");

                }

            }

        }
        for (var i = 0; i < jsonText.length; i++) {

            frequency[i] = jsonText[i].Frequency;
            maxMonetary[i] = jsonText[i].MaxMonetary;
            aVGMonetary[i] = jsonText[i].AVGMonetary;
            allMonetary[i] = jsonText[i].AllMonetary;
            allCategory[i] = jsonText[i].AllCategory;
            time[i] = jsonText[i].strTime;

        }

        myChart.hideLoading();

        myChart.setOption({

            xAxis: {
                data: time
            },
            series: [
                { name: '购买频率', data: frequency },
                { name: '单次最高交易金额', data: maxMonetary },
                { name: '平均交易金额', data: aVGMonetary },
                { name: '总交易金额', data: allMonetary },
                { name: '商品购买种类', data: allCategory }

            ]

        });
    });
</script>
@*3.0会员月度消费分析表格*@
<script type="text/javascript">
    $.post('/Admin/MembershipAnalysis/GetMonthlyConsumption/', function (jsonText) {
        var myChart = echarts.init(document.getElementById('main3'), 'macarons');
        var colors = ['#5793f3', '#d14a61', '#6F00D2', '#00ec00', '#675bba'];
        myChart.setOption({
            color: colors,
            title: {
                text: '3.0会员月度消费分析表格'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                right: '20%'
            },
            toolbox: {
                feature: {
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            legend: {
                data: ['购买频率', '单次最高交易金额', '平均交易金额', '总交易金额', '商品购买种类']
            },
            xAxis: [
                {
                    type: 'category',
                    name: '年',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '频率',
                    min: 0,
                    max: 200,
                    position: 'right',
                    axisLine: {
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} '
                    }
                },
                {
                    type: 'value',
                    name: '单次最高交易金额',
                    min: 0,
                    max: 15000,
                    position: 'right',
                    offset: 60,
                    axisLine: {
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                },
                {
                    type: 'value',
                    name: '平均交易金额',
                    min: 0,
                    max: 15000,
                    position: 'right',
                    offset: 145,
                    axisLine: {
                        lineStyle: {
                            color: colors[2]
                        }
                    }
                },
                {
                    type: 'value',
                    name: '总交易金额',
                    min: 0,
                    max: 1000000,
                    position: 'right',
                    offset: 205,
                    axisLine: {
                        lineStyle: {
                            color: colors[3]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                },
                {
                    type: 'value',
                    name: '商品购买种类',
                    min: 0,
                    max: 200,
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: colors[4]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} '
                    }
                }
            ],
            series: [
                {
                    name: '购买频率',
                    type: 'bar',
                    data: []
                },
                {
                    name: '单次最高交易金额',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: []
                },
                  {
                      name: '平均交易金额',
                      type: 'bar',
                      yAxisIndex: 2,
                      data: []
                  },
                  {
                      name: '平均交易金额',
                      type: 'bar',
                      yAxisIndex: 3,
                      data: []
                  },
                {
                    name: '商品购买种类',
                    type: 'line',
                    yAxisIndex: 4,
                    data: []
                }]
        });
        myChart.showLoading();
        var frequency = [];
        var maxMonetary = [];
        var aVGMonetary = [];
        var allMonetary = [];
        var allCategory = [];
        var time = [];


        if (typeof (jsonText) == "string") {
            try {
                jsonText = eval(jsonText);
            } catch (e) {
                try {
                    jsonText = eval("(" + jsonText + ")")
                } catch (e) {
                    alert("格式错误：必须为json格式字符串");

                }

            }

        }
        for (var i = 0; i < jsonText.length; i++) {

            frequency[i] = jsonText[i].Frequency;
            maxMonetary[i] = jsonText[i].MaxMonetary;
            aVGMonetary[i] = jsonText[i].AVGMonetary;
            allMonetary[i] = jsonText[i].AllMonetary;
            allCategory[i] = jsonText[i].AllCategory;
            time[i] = jsonText[i].strTime;

        }

        myChart.hideLoading();

        myChart.setOption({

            xAxis: {
                data: time
            },
            series: [
                { name: '购买频率', data: frequency },
                { name: '单次最高交易金额', data: maxMonetary },
                { name: '平均交易金额', data: aVGMonetary },
                { name: '总交易金额', data: allMonetary },
                { name: '商品购买种类', data: allCategory }

            ]

        });
    });
</script>
}
<div>
    <a href="#tbList">1.0会员总消费分析表格</a>
    <a href="#tbList2">2.0会员年度消费分析表格</a>
    <a href="#tbList3">3.0会员月度消费分析表格</a>
</div>
<div>
    @*1.0会员总消费分析表格：*@
    <table id="tbList"></table>
</div>
<div style="width: 100%;height:30px;"></div>
<div id="main1" style="width: 100%;height:800px;"></div>
<div style="width: 100%;height:30px;"></div>
<div id="main1_1" style="width: 100%;height:400px;"></div>
<div style="width: 100%;height:30px;"></div>
<div>
    @*2.0会员年度消费分析表格：*@
    <table id="tbList2"></table>
</div>
<div style="width: 100%;height:30px;"></div>
<div id="main2" style="width: 100%;height:400px;"></div>
<div style="width: 100%;height:30px;"></div>
<div>
    @*3.0会员月度消费分析表格：*@
    <table id="tbList3"></table>
</div>
<div style="width: 100%;height:30px;"></div>
<div id="main3" style="width: 100%;height:400px;"></div>


